<cfoutput>
	<div class="Answer-radio" style="display: none;">
		<p>
			Please fill in the details. There must be at least 2 radio buttons and a maximum of 10
		</p>
		<script type="text/javascript">
			
			function RemoveRB(rbID){
				if($('##rbcount').val() > 2)
				{
					$('##rb-row-'+rbID).remove();
					var new_rbcount = parseInt($('##rbcount').val(), 10) - 1;
					$('##rbcount').val(new_rbcount);
					redrawShadows();
				}
				else
				{
					alert("You must have atleast 2 radio buttons");
				}
			}
			
			function AddRB(){

				if($('##rbcount').val() < 10)
				{
					//get checkbox value
					var new_rbcount = parseInt($('##rbcount').val(), 10) + 1;

					//to keep it clean i've split up the append
					//input
					var input = "<input type='Textbox' name='rb"+new_rbcount+"' id='rb"+new_rbcount+"'>";

					//the top of the button
					var remove_button_top = "<button class='ui-state-default ui-corner-all' onclick='RemoveRB(\""+new_rbcount+"\");' name='btnRemoveRB' id='btnRemoveRB' type='Button' value='Remove radio button'>";
					//the content of the button
					var remove_button_content ="Remove";
					
					//the bottom of the button
					var remove_button_bottom ="</button>";
					
					//create a button
					var button = remove_button_top + remove_button_content + remove_button_bottom;

					//apend the above content  jquery appends the content as the last child
					$('##radiobuttons').append("<tr id='rb-row-"+new_rbcount+"' name='rb-row-"+new_rbcount+"'><td>"+input+"</td><td>"+button+"</td></tr>");
					
					//update the cb count
					$('##rbcount').val(new_rbcount);
					
					redrawShadows();
				}
				else
				{
					alert("You cannot add any more Radio button");
				}
			}
		
		</script>
		
		<cfquery datasource="exp" name="rbInfo">
			SELECT r.*
			FROM radiogroup rgrp, radio r
			WHERE rgrp.id = #InfoID#
			AND rgrp.id = r.radioGroupID
			ORDER BY r.id
		</cfquery>

		<input type="hidden" value="#rbInfo.recordcount#" name="rbcount" id="rbcount">
		<input type="hidden" value="#InfoID#" name="rbgrpid" id="rbgrpid">
		<table name="radiobuttons" id="radiobuttons">
		<cfset index = 1>
		<cfloop query="rbInfo">
			<tr id='rb-row-#index#'>
				<td>
					<input type="Textbox" value="#text#" name="rb#index#" id="rb#index#">
				</td>
				<td>
						<button class='ui-state-default ui-corner-all' onclick='RemoveRB("#index#");' type='Button' value='Remove Checkbox'>
							Remove
						</button>
				</td>
			<tr>
			<cfset index += 1>
		</cfloop>
		</table>
		<button class="ui-state-default ui-corner-all" onclick="AddRB();" name="btnAddRB" id="btnAddRB" type="button" value="Add Radio button">
			Add radio button
		</button>
	</div>
</cfoutput>
